<template>
  <view w-full box-border pa-20rpx>
    <view rounded-20rpx bg="#fff" px-20rpx mb-20rpx>
      <view v-if="ticketCardInfo.effectiveStatus != 0 && (ticketCardInfo.ticketNo || ticketCardInfo.memberNumber)" h-490rpx flex flex-col justify-center items-center style="border-bottom: 1px solid #eee">
        <l-painter>
          <l-painter-qrcode
            :text="ticketCardType === 1 ? ticketCardInfo.ticketNo : ticketCardInfo.memberNumber"
            css="width: 300rpx; height: 300rpx" />
        </l-painter>
        <view mt-40rpx>
          {{ ticketCardObj[ticketCardType] }}号：{{
            ticketCardType === 1 ? ticketCardInfo.ticketNo : ticketCardInfo.memberNumber
          }}
        </view>
      </view>
      <view py-20rpx>
        <nut-cell v-if="ticketCardType === 1">
          <template #title>
            <text text-28rpx text="#000" font-500>电子票名称</text>
          </template>
          <template #desc>
            <text text-28rpx text="#7D7D7D">{{ ticketCardInfo.ticketName }}</text>
          </template>
        </nut-cell>
        <nut-cell v-if="ticketCardType === 2">
          <template #title>
            <text text-28rpx text="#000" font-500>智能卡号</text>
          </template>
          <template #desc>
            <text text-28rpx text="#7D7D7D">{{ ticketCardInfo.memberNumber }}</text>
          </template>
        </nut-cell>
        <nut-cell v-if="ticketCardType === 2">
          <template #title>
            <text text-28rpx text="#000" font-500>智能卡类型</text>
          </template>
          <template #desc>
            <text text-28rpx text="#7D7D7D">{{ ticketCardInfo.groupName }}</text>
          </template>
        </nut-cell>
        <nut-cell>
          <template #title>
            <text text-28rpx text="#000" font-500>成员</text>
          </template>
          <template #desc>
            <text text-28rpx text="#7D7D7D">{{ ticketCardInfo.memberName }}</text>
          </template>
        </nut-cell>
        <nut-cell>
          <template #title>
            <text text-28rpx text="#000" font-500>绑定时间</text>
          </template>
          <template #desc>
            <text text-28rpx text="#7D7D7D">{{ ticketCardInfo.createTime }}</text>
          </template>
        </nut-cell>
      </view>
    </view>
    <view rounded-20rpx bg="#fff">
      <view bg="#E9E9E9" h-110rpx rounded-t-20rpx flex justify-center items-center>
        <view
          w-full
          h-full
          flex
          justify-center
          items-center
          text-32rpx
          font-500
          text="#000"
          :class="{ active: activeIndex == 1 }"
          @click="changeTab(1)">
          权益
        </view>
        <view
          w-full
          h-full
          flex
          justify-center
          items-center
          text-32rpx
          font-500
          text="#000"
          :class="{ active: activeIndex == 2 }"
          @click="changeTab(2)">
          核销记录
        </view>
      </view>
      <view v-if="activeIndex == 1" px-20rpx>
        <view v-for="(item, index) in interestList" style="border-bottom: 1px solid #eee" py-20rpx>
          <view text-28rpx text="#000" font-500>No.{{ index + 1 }}</view>
          <nut-cell desc-text-align="left" title-width="200rpx">
            <template #title>
              <text text-28rpx text="#000" font-500>适用场地</text>
            </template>
            <template #desc>
              <text text-28rpx text="#000" font-500>{{ item.scenicSpotName }}</text>
            </template>
          </nut-cell>
          <nut-cell desc-text-align="left" title-width="200rpx">
            <template #title>
              <text text-28rpx text="#000" font-500>总核销次数</text>
            </template>
            <template #desc>
              <text text-28rpx text="#000" font-500>{{ item.writeOffNumber }}</text>
            </template>
          </nut-cell>
          <nut-cell desc-text-align="left" title-width="200rpx">
            <template #title>
              <text text-28rpx text="#000" font-500>可核销次数</text>
            </template>
            <template #desc>
              <text text-28rpx text="#000" font-500>
                {{ item.writeOffNumber - item.alreadyWriteOffNumber }}
              </text>
            </template>
          </nut-cell>
        </view>
      </view>
      <view v-if="activeIndex == 2" px-20rpx>
        <z-paging ref="paging" v-model="dataList" use-page-scroll :refresher-enabled="false" @query="queryList">
          <view v-for="(item, index) in dataList" :key="index" py-40rpx style="border-bottom: 1px solid #eee">
            <view flex justify-between items-center text-28rpx text="#000" font-500 mb-20rpx>
              <view>{{ ticketCardObj[ticketCardType] }}</view>
              <view>{{ item.scenicSpotName }}</view>
            </view>
            <view box-border flex items-center>
              <image mode="aspectFill" w-140rpx h-140rpx rounded-20rpx mr-30rpx :src="item.img"></image>
              <view flex flex-col justify-between h-140rpx>
                <view text-24rpx>{{ ticketCardObj[ticketCardType] }}号：{{ no }}</view>
                <view text-24rpx>手机号码：{{ item.receivePhone }}</view>
                <view text-24rpx>核销时间：{{ item.writeOffTime }}</view>
              </view>
            </view>
          </view>
        </z-paging>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  getTicketDetail,
  getMemberCardDetail,
  getTicketInterest,
  getMemberCardInterest,
  selectTicketWriteOffRecordList,
  selectMemberCardWriteOffRecordList
} from '@/api/myMemberCardAndTicket'
import { onLoad } from '@dcloudio/uni-app'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
const paging = ref<any>(null)
useZPaging(paging)
const activeIndex = ref(1)
const ticketCardType = ref<number>(1)
const no = ref<string>('')
const ticketCardInfo = ref<any>({})
const interestList = ref<any>({})
const dataList = ref<any>([])

const ticketCardObj = ref<any>({
  1: '电子票',
  2: '智能卡'
})
function changeTab(index: number) {
  activeIndex.value = index
  if (activeIndex.value == 2) paging.value?.reload()
}
const queryList = (pageNo: number, pageSize: number) => {
  const api = ticketCardType.value === 1 ? selectTicketWriteOffRecordList : selectMemberCardWriteOffRecordList
  api({
    pageNumber: pageNo,
    pageSize,
    no: no.value
  })
    .then((res) => paging.value.complete(res.data.result.records))
    .catch(() => paging.value.complete(false))
}
function init() {
  if (ticketCardType.value == 1) {
    getTicketDetail(no.value).then((res: any) => {
      console.log(res)
      ticketCardInfo.value = res.data.result
      if (res.data.result.effectiveStatus == 0) {
        uni.showToast({
          title: `该电子票已失效`,
          icon: 'none'
        })
      }
    })
    getTicketInterest(no.value).then((res: any) => {
      interestList.value = res.data.result
    })
  } else {
    getMemberCardDetail(no.value).then((res: any) => {
      console.log(res)
      ticketCardInfo.value = res.data.result
      if (res.data.result.effectiveStatus == 0) {
        uni.showToast({
          title: `该智能卡已失效`,
          icon: 'none'
        })
      }
    })
    getMemberCardInterest(no.value).then((res: any) => {
      interestList.value = res.data.result
    })
  }
}
onLoad((options: any) => {
  ticketCardType.value = parseInt(options.ticketCardType)
  no.value = options.no
  uni.setNavigationBarTitle({
    title: ticketCardType.value === 1 ? '电子票详情' : '手环详情'
  })

  init()
})
</script>
<style>
page {
  --nut-cell-padding: 0rpx 0rpx;
  --nut-cell-box-shadow: none;
}
</style>
<style scoped lang="scss">
.active {
  border-radius: 20rpx 20rpx 0 0;
  background-color: #fff;
}
</style>
